// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/grid')
import { parseTime } from '@/utils/index'
const getLast7Day = () => {
  let tempDate = new Date()
  let tempArrData = []
  for (let i = 0; i < 7; i++) {
    tempArrData.unshift(
      parseTime(tempDate.getTime() - i * 24 * 60 * 60 * 1000, '{m}/{d}')
    )
  }

  return tempArrData
}
export default class EchartsConfig {
  private myChart: any
  private option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    grid: {
      left: '10%',
      right: '6%'
    },
    toolbox: {
      show: false,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      left: '70%',
      orient: 'vertical',
      textStyle: {
        color: '#fff',
        fontSize: 10,
        fontWeight: 'normal'
      },
      data: [
        { name: '首贷率', icon: 'line' },
        { name: '用信率趋势', icon: 'line' }
      ]
    },
    xAxis: {
      type: 'category',
      data: getLast7Day(),
      boundaryGap: false,
      axisPointer: {
        type: 'shadow'
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#6A989E'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        inside: false,
        color: '#d1d1d1', // x轴颜色
        fontWeight: 'normal',
        fontSize: 10,
        lineHeight: 22
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '',
        min: 0,
        max: 100,
        interval: 25,
        axisLabel: {
          show: true,
          formatter: '{value}',

          color: '#d1d1d1', // x轴颜色
          fontWeight: 'normal',
          fontSize: 12,
          lineHeight: 22
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(204,204,204,0.2)'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      {
        show: false,
        type: 'value',
        name: '',
        min: 0,
        max: 100,
        interval: 25
      }
    ],
    series: [
      {
        name: '首贷率',
        type: 'line',
        smooth: true,
        showSymbol: false,
        itemStyle: {
          normal: {
            color: 'rgba(1, 141, 249,1)'
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              [
                { offset: 0, color: 'rgba(1, 141, 249, 1)' },
                { offset: 1, color: 'rgba(1, 141, 249, 0.1)' }
              ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            )
          }
        },
        data: [40, 65, 33, 77, 96, 54, 66]
      },
      {
        name: '用信率趋势',
        type: 'line',
        smooth: true,
        showSymbol: false,
        yAxisIndex: 1,
        data: [35, 50, 60, 55, 70, 60, 30],
        itemStyle: {
          color: '#C82DA0'
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              [
                { offset: 0, color: 'rgba(190, 43, 151,1)' },
                { offset: 1, color: 'rgba(190, 43, 151, 0.1)' }
              ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            )
          }
        }
      }
    ]
  }
  constructor(domId: string) {
    this.myChart = echarts.init(document.getElementById(domId))
  }
  public setOption() {
    this.myChart && this.myChart.setOption(this.option)
  }
}
